<template>
  <div class="background">
    <!-- 左边的图片 -->
    <img
      src="../assets/登录2.jpg"
      style="
        width: 650px;
        height: 550px;
        position: relative;
        top: 70px;
        left: 50px;
      "
    />
    <!-- 右边的登录 -->
    <div class="right">
      <el-form ref="userForm" :model="userForm" :rules="rules">
        <!-- 输入用户 -->
        <div class="child">
          <div class="char1">用户名</div>
          <el-input
            class="input id"
            v-model="userForm.userName"
            ref="userName"
            placeholder="请输入用户名"
            autocomplete="off"
          ></el-input>
        </div>
        <!-- 输入密码 -->
        <div class="child">
          <div class="char2">密码</div>
          <div class="secret" prop="password">
            <input
              class="input password"
              :type="passwordVisible ? 'text' : 'password'"
              v-model="userForm.password"
              ref="password"
              placeholder="请输入密码"
              autocomplete="off"
            />
            <button class="button1" @click="togglePasswordVisibility">
              <svg
                v-if="passwordVisible"
                t="1720492578704"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3313"
                width="20"
                height="20"
              >
                <path
                  d="M512 320c-106 0-192 86-192 192s86 192 192 192 192-86 192-192-86-192-192-192z m0 320c-70.6 0-128-57.4-128-128s57.4-128 128-128 128 57.4 128 128-57.4 128-128 128z"
                  fill="#262535"
                  p-id="3314"
                ></path>
                <path
                  d="M925.8 480.6C819.4 325.8 680.8 256 512 256S204.6 325.8 98.2 480.6c-21.7 31.7-21.7 75.1 0 106.8 106.4 154.8 245 224.6 413.8 224.6s307.4-69.8 413.8-224.6c21.7-31.7 21.7-75.1 0-106.8zM512 768c-147.5 0-272-67.9-368.3-192C240 451.9 364.5 384 512 384s272 67.9 368.3 192c-96.3 124.1-220.8 192-368.3 192z"
                  fill="#262535"
                  p-id="3314"
                ></path>
              </svg>
              <svg
                v-else
                t="1720492578704"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3313"
                width="20"
                height="20"
              >
                <path
                  d="M889.104707 387.688763l70.419839-75.851549-19.678178-18.260899-70.236668 75.641771C692.654476 551.906895 514.610454 546.317597 512.432859 546.527374 282.437627 545.399691 86.775342 312.650743 84.820827 310.288952l-20.688181 17.158798c4.218068 5.081739 57.688887 68.527746 140.991128 129.708154l-77.419254 94.330412 20.780279 17.054421 78.625732-95.801926c45.570895 31.146371 98.579179 60.231803 156.648736 79.054497l-34.639938 117.182886 25.764803 7.608282 34.744315-117.550253c32.855292 8.635681 66.927295 14.161534 102.120842 14.33345 0.603751 0.052189 2.295276 0.105401 4.972245 0.105401 13.709233 0 53.500495-1.684362 108.149139-18.088984l30.854728 175.038572 26.447349-4.670369L650.64264 546.901905c48.557926-17.454534 106.129132-46.603411 166.388565-94.158497l55.990199 100.527554 23.481807-13.065574-58.413388-104.879676C854.996888 420.868443 872.018563 405.329539 889.104707 387.688763z"
                  fill="#262535"
                  p-id="3314"
                ></path>
              </svg>
            </button>
          </div>
        </div>
        <!-- 提示框 -->
        <div class="child"></div>

        <div class="child">
          <!-- 点击登录进入系统页,应该得改，需要密码ID正确后才能跳转 -->
            <!-- 登录按钮 -->
            <div
              class="button2"
              type="primary"
              @click.prevent="login('userForm')"
            >
              <span>登录</span>
            </div>
        </div>
        <div class="child">
          <router-link to="/forgotPassword">
            <div class="button2">
              <span>找回密码</span>
            </div>
          </router-link>
        </div>
        <div class="child">
          <router-link to="/register">
            <!-- 注册按钮 -->
            <div class="button2">
              <span>注册</span>
            </div>
          </router-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "LoginView",
  data() {
    return {
      userForm: {
        userName: "",
        password: "",        
      },
      rules: {
        userName: [
          { required: true, message: "用户名不能为空" },
        ],
        password: [
          { required: true, message: "密码不能为空" },
          { min: 3, message: "密码至少为3个字符" },
        ],
      },
      passwordVisible: false
    };
  },
  
  methods: {
    togglePasswordVisibility() {
      this.passwordVisible = !this.passwordVisible;
    },
    login() {
      console.log("login");
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          if (this.userForm.userName.trim() !== "" && this.userForm.password.trim() !== "") {
            // 发送登录请求
            axios.post('http://localhost:8095/user/login', this.userForm)
              .then((response) => {
                console.log("rep", response);
                if (response.data.code === 200) {  // 根据ResponseResult中的code判断成功
                  console.log("code", response.data.code);
                  // 登录成功，生成JWT令牌
                  localStorage.setItem('token', response.data.data.token);
                  // 存储用户类型
                  localStorage.setItem('userType', response.data.data.userType);
                  localStorage.setItem('userName', this.userForm.userName);
                  // 将用户名更新到VueX store中
                  this.$store.commit('updateUserName', this.userForm.userName);
                  // 跳转到系统页
                  // this.$router.push({ name: 'system' });
                  if(response.data.data.userType === '1'){this.$router.push({ path: '/ManagerHead/ProjectList/ProjectDoing'  });}
                  else if(response.data.data.userType === '2'){this.$router.push({  path: '/MemberHead/MemberProjectList/ProjectDoing'  });}
                  else {this.$router.push({path:'/CheckerHead/CheckerProjectList/CheckerDoing'});}
                } else {
                  console.log("登录失败，用户名不存在或者密码错误");
                  alert("登录失败，用户名不存在或者密码错误");
                }
              })
              .catch((error) => {
                  console.log(error);
              });
            }
          } else {
            if (this.userForm.userName.trim() === "") {
              this.$refs.userName.style.borderColor = "red";
            } else {
              this.$refs.userName.style.borderColor = "#797979";
            }
  
            if (this.userForm.password.trim() === "") {
              this.$refs.password.style.borderColor = "red";
            } else {
              this.$refs.password.style.borderColor = "#797979";
            }
            return false;
          }
        });
      }
    }
};
</script>

<style scoped>
a {
  text-decoration: none; /* 移除下划线 */
  color: inherit; /* 继承父元素的颜色 */
}

.secret {
  box-sizing: border-box;
  position: relative;
  width: 294px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.id {
  width: calc(100% - 120px);
 
}

.password {
  width: 228px;
  height: 40px;
  border: none;
  outline: none;
  padding: 0 6px;
  font-size: 14px;
  line-height: 40px;
  border-radius: 2px;
}

.input-password::placeholder {
  color: rgb(216, 217, 216); /* 设置提示文字颜色为灰色 */
}

.button1 {
  width: 66px;
  height: 40px;
  border: none;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 40px;
  border: 1px solid rgb(206, 206, 207);
  background-color: rgb(232, 232, 254);
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button2 {
  display: block;
  position: relative;
  top: 0px;
  left: 130px;
  width: 250px;
  height: 45px;
  background-color: rgb(2, 167, 240);
  border-radius: 10px;
  text-align: center;
  font-size: 26px;
  font-family: Arial;
  font-display: normal;
  color: rgb(255, 255, 255);
  align-items: center;
}

.char1 {
  width: 100px;
  text-align: center;
  height: 32px;
  font-size: 28px;
  font-family: Arial;
  font-display: normal;
  color: rgb(51, 51, 51);
  margin: 24px;

}

.char2 {
  width: 100px;
  text-align: center;
  height: 32px;
  font-size: 28px;
  font-family: Arial;
  font-display: normal;
  color: rgb(51, 51, 51);
  margin: 20px;

}

.child {
  width: 100%;
  height: 80px;
  margin: 10px;
  display: flex;
  align-items: center;
}

.background {
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(232, 232, 254);
  border: 2px solid rgb(206, 206, 207);
}

.right {
  display: flex;
  flex-direction: column;
  width: 450px;
  height: 400px;
  position: relative;
  top: 150px;
  left: 200px;
}
</style>
